<template>
  <div>
    <c-title :hide="false" text="搜索"></c-title>
    <van-search v-model="storeName" shape="round" placeholder="请输入搜索关键词" show-action="true" @input="storeInput">
      <template #action>
        <div @click="searchClick" style="font-size: 29rpx; color: #ff3a00;">搜索</div>
      </template>
    </van-search>
    <div class="search-main">
      <div class="title">商品</div>
      <div class="search-goods flex-j-sb" v-if="storeGoodsList.length > 0">
        <block v-for="(item, index) in storeGoodsList" :key="index">
          <div class="goods-item flex" @click="goodsNavTo(item.goods_id)">
            <div class="goods-img">
              <van-image width="10.7813rem" height="10.7813rem" radius="0.4688rem 0.4688rem 0 0" :src="item.thumb" />
            </div>
            <div class="goods-name flex-a-c">
              <div class="goods-title ell">
                {{ item.title }}
              </div>
            </div>
            <div class="fine-food flex-j-sb flex-a-c">
              <div class="fine">￥{{ item.price }}</div>
              <div class="number">已售{{ item.total_sales }}</div>
            </div>
          </div>
        </block>
      </div>
      <van-empty description="空空如也" v-else />
      <div class="flex-j-c flex-a-c look-over" @click="goodsMoreData" v-if="goodsPage < goodsLastPage">查看更多<span class="iconfont icon-advertise-next"></span></div>

      <div class="commercial-title">消费券商户</div>
      <div class="commercial-list" v-if="searchStoreList.length > 0">
        <block v-for="(item, index) in searchStoreList" :key="index">
          <div class="commercial-item flex-a-c" @click="commercialOn(item.id)">
            <div class="img">
              <img :src="item.store_logo_url" />
            </div>
            <div class="wrap">
              <div class="wrap-title">{{ item.store_name }}</div>
              <div class="flex-j-sb f-wrap ">
                <div class="flex wrap-tag">
                  <div>{{ item.first_category }}</div>
                  <div>{{ item.second_category }}</div>
                  <div>{{ item.third_category }}</div>
                </div>
                <div class="distance">
                  <!-- {{ filters.kmUnit(item.distance) }} -->
                  {{ item.distance | caitalize }}
                  <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/commercial-navigation.png" />
                </div>
              </div>
              <div class="flex address">
                <div class="mean-tag" v-if="item.average_price !== '0.00'">人均¥{{ item.average_price }}</div>
                <div class="mean-line">|</div>
                <div>{{ item.city }}{{ item.district }}{{ item.street }}{{ item.address }}</div>
              </div>
            </div>
          </div>
          <div class="mb20"></div>
        </block>
        <div class="flex-j-c flex-a-c look-over" @click="storeMoreData" v-if="storePage < storeLastPage">查看更多<span class="iconfont icon-advertise-next"></span></div>
      </div>
    </div>
  </div>
</template>
<script>
import search_controller from "./search_controller.js";
export default search_controller;
</script>
<style lang="scss" scoped>
.mb20 {
  height: 0.625rem;
  clear: both;
}
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数*/
  overflow: hidden;
}

.mb-20 {
  margin-bottom: 0.625rem;
}

.f-wrap {
  flex-wrap: wrap;
}

.search-main .title {
  margin: 0.9375rem 0 1rem 0.625rem;
  font-size: 0.875rem;
  color: #222;
  text-align: left;
}

.look-over {
  font-size: 0.75rem;
  color: #979797;
}

.commercial-title {
  font-size: 0.8462rem;
  color: #222;
  margin: 1.5625rem 0 1rem 0.625rem;
  text-align: left;
}

.commercial-list {
  margin: 0 0.625rem;

  .look-over {
    padding: 0.9063rem 0 1.8125rem 0;
  }
}

.commercial-item {
  background-color: #fff;
  padding: 0.875rem 0.4688rem;

  .img {
    width: 4.1875rem;
    height: 4.1875rem;
    margin-right: 0.4063rem;

    img {
      width: 4.1875rem;
      height: 4.1875rem;
    }
  }

  .wrap {
    flex: 3;

    .wrap-title {
      font-size: 0.9453rem;
      color: #222;
      text-align: left;

      /* margin: 0 0 0.3125rem 0; */
    }

    .wrap-tag div {
      font-size: 0.625rem;
      color: #222;

      /* padding: 0.2188rem 0.375rem 0.1875rem 0.2813rem; */
      padding: 0.2188rem 0.375rem 0.1875rem 0.2813rem;
      background-color: #f3f3f5;
      margin: 0 0.3438rem 0 0;
    }
  }

  .distance {
    font-size: 0.6875rem;
    color: #888;

    img {
      width: 0.6875rem;
      height: 0.6875rem;
    }
  }

  .address {
    font-size: 0.6875rem;
    color: #888;
    align-items: center;
    margin: 0.2188rem 0 0 0;
  }
}

.address .mean-tag {
  font-size: 0.625rem;
  color: #222;
  white-space: nowrap;
  padding: 0.2188rem 0.375rem 0.1875rem 0.2813rem;
  background-color: #f3f3f5;
  margin-right: 0.3438rem;
}

.mean-line {
  font-size: 0.9375rem;
  margin-right: 0.3438rem;
}

/* 商品信息 */

.search-goods {
  flex-wrap: wrap;
  margin: 0 0.625rem;
}

.goods-item {
  width: 10.7813rem;
  background-color: #fff;
  border-radius: 30rpx;
  flex-direction: column;
  padding: 0 0 0.625rem 0;
  margin-bottom: 0.625rem;

  .goods-img {
    width: 10.7813rem;
    height: 10.7813rem;
    border-radius: 0.4688rem 0.4688rem 0 0;
    position: relative;
  }
}

.goods-img {
  .label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    font-size: 0.75rem;
    color: #fff;
    background: linear-gradient(90deg, #ff6a3f 0%, #ff3b01 100%);
    padding: 0 0.2188rem;
    border-radius: 0.4688rem 0 0.4688rem 0;
  }

  .store-name {
    width: 100%;
    height: 1.6563rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.5);
    align-items: center;
    font-size: 0.6875rem;
    color: #fff;
  }
}

.store-name {
  .icon-service_n {
    color: #fff;
    font-size: 0.6875rem;
  }

  .units {
    margin-right: 0.25rem;
  }
}

.goods-name {
  margin: 0.625rem 1.125rem 0.7188rem 0.4688rem;

  .goods-title {
    font-size: 0.8125rem;
    color: #35314a;
    text-align: left;
  }
}

.fine-food {
  margin: 0.625rem 0.625rem 0 0.625rem;
}

.fine {
  font-size: 0.9375rem;
  color: #ff3a00;
}

.fine-food .number {
  font-size: 0.625rem;
  color: #b5b5b5;
}
</style>
